<template name="grab-item">
    <view class="grab-li">
        <view class="grab-item">
            <view class="product-image">
                <u-image
                    :src="grab.product? grab.product.mainImg:null"
                    width="198rpx"
                    height="198rpx"
                ></u-image>
                <block v-if="grab.type != 'priority'">
                    <view class="icon-lost" v-if="grab.state=='lost'" ></view>
                    <view v-if="grab.state=='win' || grab.state=='complete'" class="icon-win"></view>
                </block>
            </view>
            <view class="grab-info">
                <u-text
                    :text="grab.product? grab.product.name:null"
                    size="24rpx"
                    color="#000000"
                    :lines="1"
                ></u-text>
                <block v-if="grab.type=='grab'">
                    <view class="grab-info-state" v-if="grab.state=='close'">已关闭</view>
                    <view class="grab-info-state" v-if="grab.state=='lost'">已结束</view>
                    <view class="grab-info-state" v-if="grab.state=='complete'">已完成</view>
                    <view class="grab-info-state" style="color: #356CE7" v-if="grab.state=='win'">已中签</view>
                    <u-count-down
                        :time="grab.product? grab.product.ext.grab_begin_time:null"
                        format="HH:mm:ss"
                        autoStart
                        @change="onChange"
                        v-if="grab.state=='wait'"
                    >
                        <view class="time">
                            <view class="time-title">等待抽签</view>
                            <text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                            <text class="time-item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                            <text class="time-item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                        </view>
                    </u-count-down>
                </block>
                <block v-if="grab.type=='priority'">
                    <view class="grab-priority-state">
                        <view class="grab-info-name" v-if="grab.state=='close'">已关闭</view>
                        <view class="grab-info-name" v-if="grab.state=='pay'">待支付</view>
                        <view class="grab-info-name" v-if="grab.state=='complete'">已完成</view>
                        <view class="grab-priority-icon"></view>
                    </view>
                </block>
                <view class="grab-info-bottom">
                    <view class="grab-info-price" v-if="grab.state=='complete' && grab.userTicketId">
                        <view class="grab-info-1">
                            <view class="grab-info-label">总价</view>
                            <u-text
                                :text="grab.totalMoney"
                                size="30rpx"
                                color="#82848a
"
                                bold
                                prefixIcon="rmb"
                                decoration="line-through"
                                iconStyle="font-size: 22rpx; color: #82848a; font-weight: bold;top: 8rpx;"
                            ></u-text>
                        </view>
                        <view class="grab-info-1">
                            <view class="grab-info-label">优惠价</view>
                            <u-text
                                :text="grab.payMoney"
                                size="30rpx"
                                color="#000000"
                                bold
                                prefixIcon="rmb"
                                iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 8rpx;"
                            ></u-text>
                        </view>
                    </view>
                    <view class="grab-info-price" v-else>
                        <view class="grab-info-label">总价</view>
                        <u-text
                            :text="grab.totalMoney"
                            size="30rpx"
                            color="#000000"
                            bold
                            prefixIcon="rmb"
                            iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 8rpx;"
                        ></u-text>
                    </view>
                    <view v-if="grab.state=='win'" class="grab-btn" @click="$u.route({
                        url: 'pages_v2/nftConfirm/index',
                        params: {
                            id: grab.id,
                            type: 'grab'
                        }
                    })">立即付款</view>
                    <view v-if="grab.state=='pay'" class="grab-btn" @click="$u.route({
                        url: 'pages_v2/nftConfirm/index',
                        params: {
                            id: grab.id,
                            type: 'pay_priority'
                        }
                    })">立即付款</view>
                </view>
            </view>
        </view>
        <u-line color="#EEEEEE" :hairline="false"></u-line>
    </view>
</template>

<script>
    export default {
        name: "grab-item",
        props: {
            grab: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                timeData: {}
            }
        },
        methods: {
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .grab-li {
        padding: 0 26rpx;
        .grab-item {
            display: flex;
            margin-bottom: 40rpx;
            .product-image {
                position: relative;
                .icon-win {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background: url("https://img.ionepin.com/8ccb5b789f49a5944bd71388ed8f5ce80b1a868f.png") no-repeat center center;
                    background-size: 158rpx 158rpx;
                }
                .icon-lost {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background: url("https://img.ionepin.com/142fb9f3a04c095ff077817f7bd2b3f155f40251.png") no-repeat center center;
                    background-size: 158rpx 158rpx;
                }
            }

            .grab-info {
                padding-left: 20rpx;
                flex: auto;
                .grab-info-state {
                    margin-top: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .grab-priority-state {
                    display: flex;
                    align-items: center;
                    margin-top: 23rpx;
                    line-height: 1.2;
                    .grab-priority-icon {
                        width: 116rpx;
                        height: 40rpx;
                        background: url("https://img.ionepin.com/9d3803c6a033103039d5cd23f03d37a2180de134.png") no-repeat;
                        background-size: 100% 100%;
                        margin-left: 20rpx;
                    }
                    .grab-info-name {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #000000;
                    }
                }
                .grab-info-bottom {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 60rpx;
                    .grab-info-price {
                        display: flex;
                        align-items: flex-end;
                        .grab-info-1 {
                            display: flex;
                            align-items: flex-end;
                            margin-right: 20rpx;
                        }
                        .grab-info-label {
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            margin-right: 8rpx;
                        }
                    }

                    .grab-btn {
                        width: 146rpx;
                        height: 50rpx;
                        border-radius: 25rpx;
                        border: 1px solid #356CE7;
                        text-align: center;
                        line-height: 50rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #356CE7;
                    }
                }
                .time {
                    display: flex;
                    margin-top: 30rpx;
                    .time-title {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FA6400;
                        line-height: 1.5;
                        margin-right: 10rpx;
                    }
                    .time-item {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FA6400;
                        line-height: 1.5;
                    }
                }
            }
        }
    }
</style>
